<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浏览器API提示</title>
</head>

<body>

    <button id="button">有人想加你为好友</button>
    <button id="push">Push.js</button>
    <button type="button" onclick="fn.close()">close</button>
    <button type="button" onclick="fn.clear()">clear</button>
    
    <p id="text"></p>
    <script>
        if (window.Notification) {
            var button = document.getElementById('button'), text = document.getElementById('text');

            var popNotice = function () {
                if (Notification.permission == "granted") {
                    var notification = new Notification("hello world", {
                        body: 'native show',
                        icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg'
                    });

                    notification.onclick = function () {
                        text.innerHTML = new Date().toTimeString().split(' ')[0] + 'native';
                        notification.close();
                    };
                }
            };

            button.onclick = function () {
                if (Notification.permission == "granted") {
                    popNotice();
                } else if (Notification.permission != "denied") {
                    Notification.requestPermission(function (permission) {
                        popNotice();
                    });
                }
            };
        } else {
            alert('浏览器不支持Notification');
        }
    </script>
    <script src="https://cdn.bootcss.com/push.js/1.0.5/push.js"></script>
    <script>
        var notification = null;

        document.querySelector("#push").addEventListener("click", function () {
            notification = Push.create('Hello World!', {
                body:"push.js show",
                icon: {
       		        x16: 'https://vuefe.cn/images/logo.png',
                    x32: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg',
                },
                timeout:1500,
                onShow: function () {
                    text.innerText = "push show";
                },
                onClick: function () {
                    text.innerText = "push click";
                },
                onClose:function(){
                    text.innerText = "push close";
                },
                onError:function(){
                    text.innerText = "push error"; 
                }
            })
        }, false)

        var fn = {
            close: function () {
                // 关闭当前
                notification.close();
            },
            clear: function () {
                // 清除所有
                Push.clear();
            }
        };
        
    </script>
</body>

</html>